<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const obj = {
      name: 'zs',
      age: 20,
      gender: '女',
      school: undefined,
      info: {
        city: '北京',
        area: '顺义',
        hobby: ['保龄球', '马术', '高尔夫']
      },
      show: function () { console.log('ok') }
    }

    // 原型对象上的属性
    obj.__proto__.a = 10

    const arr = ['a', 'b', 'c', { name: 'zs', age: 20 }]

    // 深拷贝：把对象上每一层属性，都进行拷贝，赋值给新对象

    // 实现深拷贝的两种方案：
    // 1. JSON 序列化
    // 1.1 如果要拷贝的对象中，数据特别复杂、特别多，则转换的性能很低
    // 1.2 不能被 JSON 识别的数据，无法被保留下来
    // 2. 自己写递归

    // const jsonStr = JSON.stringify(obj)
    // const o = JSON.parse(jsonStr)

    // 形参中的 origin 是需要进行深拷贝的对象
    function deepClone(origin) {
      // 判断用户给定的值，是否需要进行深拷贝
      if (typeof origin !== 'object') return origin
      // 新对象
      const o = Array.isArray(origin) ? [] : {}

      // 循环拷贝 origin 最外层的属性，交给对象 o 进行保存
      for (const k in origin) {
        // 只拷贝对象本身的属性，不拷贝原型对象上的属性
        if (origin.hasOwnProperty(k)) {
          // 在每次循环中，都要把当前的值，进行深拷贝的处理
          o[k] = deepClone(origin[k])
        }
      }

      return o
    }

    // const o = deepClone(obj)
    const o = deepClone(arr)
    // const o = deepClone('hello')

    // console.log(o)
    console.log(o, arr)
  </script>
</body>

</html>